<template>
	<view class="wrap-x bg-white ">
		<view class="wrap-y" style="width: 50vw;">
			<view class="title">属性设置区</view>
			<view class="wrap-x row margin-top-sm">
				<view class="label " style="font-weight: 550;">1.过度动画-transition属性</view>
			</view>
			<view style="margin: 30rpx;border: 1rpx solid #999;width: 42vw;" class="wrap-y">
				<view class="wrap-x" style="border-bottom: 1rpx solid #999;background-color: #eee;">
					<view
						style="line-height: 50rpx;text-align: center;height: 50rpx;width: 7vw;border-right: 1rpx solid #999;">
						属性</view>
					<view style="line-height: 50rpx;text-align: center;height: 50rpx;width: 35vw;">属性描述</view>
				</view>
				<view class="wrap-x" style="border-bottom: 1rpx solid #999;">
					<view
						style="line-height: 50rpx;text-align: center;height: 50rpx;width: 7vw;border-right: 1rpx solid #999;">
						transition-property</view>
					<view style="line-height: 50rpx;text-align: center;height: 50rpx;width: 35vw;">
						设置过度样式属性，all表示盒子的所有属性</view>
				</view>
				<view class="wrap-x">
					<view
						style="line-height: 50rpx;text-align: center;height: 50rpx;width: 7vw;border-right: 1rpx solid #999;">
						transition-duration</view>
					<view style="line-height: 50rpx;text-align: center;height: 50rpx;width: 35vw;">
						过渡的持续时间，单位为秒(s)</view>
				</view>

			</view>
			<view class="wrap-x margin-tb">

				<view class="wrap-x row">
					<view class="label">transition-property:</view>
					<input v-model="pro" type="text" class="input " />
				</view>
				<view class="wrap-x row">
					<view class="label">transition-duration:</view>
					<uni-number-box v-model="time" type="number" class="input " />
				</view>
				<button type="warn" @click="setTran" style="height: 30px;line-height: 30px;font-size: 14px;">设置</button>
			</view>
			<view class="wrap-x row margin-top-sm">
				<view class="label " style="font-weight: 550;">2.变形动画-transform属性</view>
			</view>
			<view style="margin: 30rpx;border: 1rpx solid #999;width: 42vw;" class="wrap-y">
				<view class="wrap-x" style="border-bottom: 1rpx solid #999;background-color: #eee;">
					<view
						style="line-height: 50rpx;text-align: center;height: 50rpx;width: 7vw;border-right: 1rpx solid #999;">
						类别</view>
					<view style="line-height: 50rpx;text-align: center;height: 50rpx;width: 35vw;">描述</view>
				</view>
				<view class="wrap-x" style="border-bottom: 1rpx solid #999;">
					<view
						style="line-height: 50rpx;text-align: center;height: 50rpx;width: 7vw;border-right: 1rpx solid #999;">
						scale( x，y)</view>
					<view style="line-height: 50rpx;text-align: center;height: 50rpx;width: 35vw;">
						缩放动画，x:表示水平缩放倍数。y:表示垂直缩放倍数。如果只写一个值就是等比例缩放</view>
				</view>
				<view class="wrap-x" style="border-bottom: 1rpx solid #999;">
					<view
						style="line-height: 50rpx;text-align: center;height: 50rpx;width: 7vw;border-right: 1rpx solid #999;">
						translate( x，y)</view>
					<view style="line-height: 50rpx;text-align: center;height: 50rpx;width: 35vw;">
						移动动画，x为正值向右，负值向左，y值为正向下，负值向上，如果只写一个值，则表示水平移动</view>
				</view>
				<view class="wrap-x">
					<view
						style="line-height: 50rpx;text-align: center;height: 50rpx;width: 7vw;border-right: 1rpx solid #999;">
						rotate( 角度)</view>
					<view style="line-height: 50rpx;text-align: center;height: 50rpx;width: 35vw;">
						旋转动画，角度为正值顺时针;负值是逆时针</view>
				</view>

			</view>

			<view class="wrap-x row margin-top-sm">
				<view class="label ">transform(scale)：</view>
				<view class="wrap-x row">
					<view class="label">x:</view>
					<uni-number-box v-model="scan" type="number" />
				</view>
				<view class="wrap-x row">
					<view class="label">y:</view>
					<uni-number-box v-model="scan1" type="number" />
				</view>
				<button @click="scale" type="warn" style="height: 30px;line-height: 30px;font-size: 14px;">伸缩</button>
			</view>
			<view class="wrap-x row margin-top-sm">
				<view class="label ">transform(translate)：</view>
				<view class="wrap-x row">
					<view class="label">x:</view>
					<uni-number-box v-model="x" type="number" class="input " />
				</view>
				<view class="wrap-x row">
					<view class="label">y:</view>
					<uni-number-box v-model="y" type="number" class="input " />
				</view>
				<button @click="move" type="warn" style="height: 30px;line-height: 30px;font-size: 14px;">移动</button>
			</view>
			<view class="wrap-x row margin-top-sm">
				<view class="label ">transform(rotate)：</view>
				<view class="wrap-x row">
					<view class="label">旋转角度:</view>
					<uni-number-box v-model="rotate" type="number" class="input " />
				</view>
				<button @click="rotates()" type="warn" style="height: 30px;line-height: 30px;font-size: 14px;">旋转</button>
			</view>
			<view class="wrap-x row margin-top-sm">
				<view class="label ">skew(x-angle，y-angle)：</view>
				<view class="wrap-x row">
					<view class="label">x-angle:</view>
					<uni-number-box v-model="x_angle"  type="number" class="input " />
						<view class="label">y-angle:</view>
					<uni-number-box v-model="y_angle" type="number" class="input " />
				</view>
				<button @click="skew()" type="warn" style="height: 30px;line-height: 30px;font-size: 14px;">倾斜</button>
			</view>
			<button @click="all()"  type="warn" class="margin-top-sm" style="width: 100px;height: 30px;line-height: 30px;font-size: 14px;">组合动作</button>
		</view>

		<view style="width:50vw;margin-right: 20px;">
			<view class="title">动画效果预览区</view>
			<view id="app" class="dashed" style="background: #eee;height:750px;margin-top: 10px;">

				<view class="demo" :class="[showTran?'activity':'']" :animation="animationData" :style="{transitionProperty: pro,transitionDuration: time+'s'}"></view>


			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		name: 'project4',
		props: {},
		data() {
			return {
				x_angle:0,
				y_angle:0,
				rotate: 0,
				float: 'inline-start',
				position: 'static',
				overflow: 'visible',
				zindex: 0,
				bgColor: '#34daaa',
				borderColor: '#ff5500',
				width: 100,
				height: 1000,
				margin: 0,
				padding: 0,
				border: 0,
				border_radiu: 0,
				box_shadow1: 0,
				box_shadow2: 0,
				box_shadow3: 0,
				box_shadow4: '#000000',
				box_shadow5: 0,
				right: 0,
				left: 0,
				bottom: 0,
				top: 0,
				clear: '',
				pro: 'all',
				time: 3,
				x: 0,
				y: 0,
				scan: 1,
				scan1: 1,
				animationData: {},
				showTran: false
			}
		},
		methods: {
			clearfloat() {
				this.position = value.detail.value;
			},
			changeOverflow(value) {
				this.float = value.detail.value;
			},
			changeClear(value) {
				this.clear = value.detail.value;
			},
			move() {
				var animation = uni.createAnimation({
					duration: 0,
					timingFunction: 'ease'
				})
				animation.translate(this.x, this.y).step()
				this.animationData = animation.export()
				setTimeout(() => {
					//translate 一个参数时，表示在X轴偏移tx，单位px；两个参数时，表示在X轴偏移tx，在Y轴偏移ty，单位px。
					animation.translate(0, 0).step()
					this.animationData = animation.export()
				}, 1000)
			},
			scale() {
				var animation = uni.createAnimation({
					duration: 0,
					timingFunction: 'ease'
				})
				animation.scale(this.scan, this.scan1).step() //先放大1,2倍
				this.animationData = animation.export()
				setTimeout(() => {
					//translate 一个参数时，表示在X轴偏移tx，单位px；两个参数时，表示在X轴偏移tx，在Y轴偏移ty，单位px。
					animation.scale(1, 1).step()
					this.animationData = animation.export()
				}, 1000)
			},
			rotates() {
				var animation = uni.createAnimation({
					duration: 0,
					timingFunction: 'ease'
				})
				animation.rotate(this.rotate).step() //先放大1,2倍
				this.animationData = animation.export()
				setTimeout(() => {
					//translate 一个参数时，表示在X轴偏移tx，单位px；两个参数时，表示在X轴偏移tx，在Y轴偏移ty，单位px。
					animation.rotate(0).step()
					this.animationData = animation.export()
				}, 1000)
			},
			skew(){
				var animation = uni.createAnimation({
					duration: 0,
					timingFunction: 'ease'
				})
				animation.skew(this.x_angle,this.y_angle).step() //先放大1,2倍
				this.animationData = animation.export()
				setTimeout(() => {
					//translate 一个参数时，表示在X轴偏移tx，单位px；两个参数时，表示在X轴偏移tx，在Y轴偏移ty，单位px。
					animation.skew(0,0).step()
					this.animationData = animation.export()
				}, 1000)
			},
			all() {
				var animation = uni.createAnimation({
					duration: 1000,
					timingFunction: 'ease'
				})
				animation.translate(this.x, this.y).scale(this.scan, this.scan).rotate(this.rotate).skew(this.x_angle,this.y_angle).step() //先放大1,2倍
				this.animationData = animation.export()
				setTimeout(() => {
					//translate 一个参数时，表示在X轴偏移tx，单位px；两个参数时，表示在X轴偏移tx，在Y轴偏移ty，单位px。
					animation.translate(0, 0).scale(1, 1).rotate(0).skew(0,0).step() //先放大1,2倍
					this.animationData = animation.export()
				}, 1000)
			},
			setTran() {
				this.showTran = true;
				setTimeout(() => {
					this.showTran = false
				}, this.time * 1000)
			}
		}
	}
</script>

<style lang="scss">
	.demo {

		width: 100px;

		height: 100px;

		background: #55aaff;

	}
	button{
		margin-left:20px
	}
	.activity {
		background: red;
		width: 300px;
		height: 300px;
	}

	radio {
		margin-left: 20px;
	}

	.title {
		font-weight: 600;
		color: red;
		font-size: 40rpx;
		text-align: center;
	}

	.row {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-left: 30rpx;

		.label {
			font-size: 30rpx;
			color: black;
			margin-right: 20rpx;
		}

		.input {
			font-size: 30rpx;
			color: black;
			width: 80px;
			border: 1rpx solid #eee;
			padding: 8rpx 10rpx;
		}
	}
</style>